//参赛队伍主机网络信息列表面板
import { Col, Row, Card, Descriptions, List, Tag, Typography } from 'antd';
const { Paragraph } = Typography;
import { useState, useEffect } from 'react';
import { queryTeamHostNetInfoList } from "@/services/competitionTeam"
import styles from './index.less'
const TeamHostNetInfoListPanel = ({competitionUnCode, competitionStatus}) => {
    const [teamHostNetInfoList, setTeamHostNetInfoList] = useState([])
    useEffect(() => {
        initTeamHostNetInfoList()
    }, competitionUnCode)
    const initTeamHostNetInfoList = async () => {
        //只有在比赛中才会获取参赛队伍主机网络信息列表
        if (competitionStatus === 'IN_THE_COMP') {
            let param = { uncode: competitionUnCode }
            const res = await queryTeamHostNetInfoList(param)
            if (res.success) {
                setTeamHostNetInfoList(res.data)
            }
        }
    }
    return (
        <>
            <Card>
                <List
                    header={
                        <div>参赛队伍主机列表</div>
                    }
                    className={styles.container}
                    bordered
                    dataSource={teamHostNetInfoList}
                    renderItem={(item) => (
                        <List.Item>
                            <div style={{ textAlign: "center" }}>{item?.teamName}</div>
                            <div style={{ textAlign: "center" }}><Paragraph copyable={item?.teamNetAddress +':'+ item?.teamNetPort}>{item?.teamNetAddress +':'+ item?.teamNetPort}</Paragraph></div>
                        </List.Item>
                    )}
                />
            </Card>
        </>
    )
}
export default TeamHostNetInfoListPanel




